<template>
  <div class="hello">
    <button style="margin-bottom: 10px" @click="concatArray()"> concat连接数组</button>
    <br>
    <button style="margin-bottom: 10px" @click="copyWithinArray()"> copyWithin数组某个元素到另一个数组上</button>
    <br>
    <button style="margin-bottom: 10px" @click="everyArray()"> every 判断数组每一个元素,全部满足返回true</button>
    <br>
    <button style="margin-bottom: 10px" @click="fillArray()"> fill填充数组</button>
    <br>
    <button style="margin-bottom: 10px" @click="filterArray()"> filter过滤数组,返回满足过滤条件的新数组</button>
    <br>
    <button style="margin-bottom: 10px" @click="findArray()"> find查找数组满足条件的第一个元素（findIndex() 返回下标）</button>
    <br>
    <button style="margin-bottom: 10px" @click="forEachArray()"> forEach遍历数组</button>
    <br>
    <button style="margin-bottom: 10px" @click="formArray()"> form由对象转化数组</button>
    <br>
    <button style="margin-bottom: 10px" @click="includesArray()"> includes查找数组是否包含某个元素</button>
    <br>
    <button style="margin-bottom: 10px" @click="indexOfArray()"> indexOF查找某个元素在数组的首次出现的下标</button>
    <br>
    <button style="margin-bottom: 10px" @click="joinArray()"> join把数组加入在一个字符串中</button>
    <br>
    <div style="border: #a32fff solid 1px;padding: 20px">
      <button style="margin-bottom: 10px" @click="mapArray()"> map处理数组</button>
      <br>
      <button style="margin-bottom: 10px" @click="popArray()"> pop删除数组最后一个</button>
      <br>
      <button style="margin-bottom: 10px" @click="pushArray()"> push向数组后添加一个或多个</button>
      <br>
      <button style="margin-bottom: 10px" @click="shiftArray()"> shift删除数组的第一个</button>
      <br>
      <button style="margin-bottom: 10px" @click="unshiftArray()"> unshift向数组前面添加一个或多个</button>
      <br>
      <button style="margin-bottom: 10px" @click="sliceArray()"> slice选取数组一部分，返回新数组</button>
      <br>
      <button style="margin-bottom: 10px" @click="spliceArray()"> splice删除或者添加数组部分</button>
      <br>
    </div>
    <button style="margin-bottom: 10px" @click="reverseArray()"> reverse倒装数组</button>
    <br>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      array1: ['a', 'b'],
      array2: ['b', 'c'],
      array3: ['a', 'b', 'c', 'd', 'c'],
      array4: ['1', '2', '3', '4'],
      ewrArray: [
        {
          name: 'mhx',
          age: 12,
          isMan: true
        },
        {
          name: 'gyf',
          age: 15,
          isMan: true
        },
        {
          name: 'cyx',
          age: 20,
          isMan: false
        },
      ],
      ewrEntity: {
        name: 'mhx',
        age: 13,
        isMan: true
      }
    }
  },
  methods: {
    concatArray() {
      alert("concat: " + this.array1.concat(this.array2))
    },
    copyWithinArray() {
      /**
       * target:赋值的下标，1：从第二个元素开始复制
       * start:复制的开始下标（选填）
       * end:复制的结束下标（选题）
       * array3复制前两个元素到后面两个上（2,0,2）
       */
      alert("copyWithinArray: " + this.array3.copyWithin(2, 0, 2))
    },
    everyArray() {
      alert("value>0: " + this.array4.every(this.valueL2))
    },
    valueL2(val) {
      return val > 2
    },
    fillArray() {
      alert("fillArray: " + this.array3.fill('xxx', 1, 2))
    },
    filterArray() {
      alert("filterArray: " + this.array4.filter(this.valueL2))  //普通数组 写成过滤函数
      alert("filterArray: " + this.array4.filter(item => item === '3'))  //普通数组  内置过滤方法
      alert("filterArray: " + JSON.stringify(this.ewrArray.filter(this.ageL18))) // 对象数组
      alert("filterArray: " + JSON.stringify(this.ewrArray.filter(this.aaa))) // 对象数组
    },
    ageL18(obj) {
      return obj.age > 18;
    },
    aaa(obj) {
      return obj = {
        name: 'gyf',
        age: 15,
        isMan: true
      };
    },
    findArray() {
      alert("findArray: " + this.array4.find(this.valueL2))
    },
    forEachArray() {
      alert('forEachArray: ' + this.array3.forEach(value => {
        console.log("value:" + value)
      }))
    },
    formArray() {
      let array1 = Array.from(this.ewrEntity)
      console.log("array1: " + array1.length)
    },
    includesArray() {
      alert("array3是否包含c: " + this.array3.includes('c'))
    },
    indexOfArray() {
      alert("c在array3的下标: " + this.array3.indexOf('c')) // 2
      alert("c在array3的下标: " + this.array3.indexOf('c', 3))  //4
    },
    joinArray() {
      /**
       * 默认以逗号区分
       */
      alert(this.array3.join(' and '))
    },
    mapArray() {
      /**
       * 把年龄大于13岁在对象名字前面加上SB_前缀
       */
      this.ewrArray.map(obj => {
        if (obj.age > 13) {
          obj.name = 'SB_' + obj.name
        }
      })
      console.log("wq：" + JSON.stringify(this.ewrArray))
    },
    popArray() {
      alert(this.array3.pop())
      alert(this.array3)
    },
    pushArray() {
      alert(this.array3.push('dd', 'cc', {
        name: 'www',
        age: 12
      })) //返回数组新的长度
      alert(this.array3)
    },
    shiftArray() {
      alert(this.array3.shift())
      alert(this.array3)
    },
    unshiftArray() {
      // alert(this.array3.unshift('aaa', 'bbb'))
      let newArr = this.array3.unshift('aaa', 'bbb')
      alert(newArr)
    },
    sliceArray() {
      alert(this.array3.slice(1, 3))  //左闭右开
      alert(this.array3) //不会改变原数组
    },
    spliceArray() {
      /**
       * 参数1:起始位置
       * 参数2：删除个数
       * 参数3：添加元素
       */
      alert(this.array3.splice(4, 1))  //显示删除的元素
      alert(this.array3)
    },
    reverseArray() {
      alert(this.array3.reverse())
    }
  }
}
</script>
